<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象的常用属性和方法</title>
  <style>
    a{
      font-size: 25px;
    }
  </style>
</head>
<body>
<div style="border: 1px solid green;">
  <a id="a1">获取触发事件的对象:e.target</a><br>
  <a id="a2" href="https://gitee.com/realsshwer" target="_blank">阻止默认事件:e.preventDefault</a><br>
  <a id="a3">阻止事件冒泡:e.stopPropagation</a><br>
  <a>获取事件的类型:e.type</a>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<script>
//获取触发事件的对象
var a1=document.getElementById('a1');
var a2=document.getElementById('a2');
var a3=document.getElementById('a3');
var ul=document.querySelector('ul');
a1.addEventListener('click',function (e){
  console.log(e.target);
  console.log('获取事件的类型:'+e.type)
})
// a1.onclick=function (e){
//   var a1Target=e.target;
//   console.log('获取触发事件的对象(target):'+a1Target);
//   console.log('获取触发事件的对象(this):'+this);
// }

//阻止默认行为
a2.onclick=function (e){
  var a2Event=e||window.event;
  a2Event.preventDefault();
}

//阻止事件冒泡
a3.onclick=function (e){
  var a3Event=e||window.event;
  a3Event.stopPropagation();
}

//事件委托
function click(e){
  console.log('clicked');
  e.target.style.backgroundColor='red';
}
ul.onclick=function (e){
  ul.addEventListener('click',click);
  //禁用文本选中
  ul.addEventListener('selectstart',function (e){
    e.preventDefault();
  })
}
</script>
</body>
</html>